import React from "react"
//这就是一个高阶组件
//高阶组件的概念:将组件作为参数,返回一个新组建的函数(组件),就是高阶组件
/**
 * 
 * @param {Object|Function} WrapComponent 传入的组件
 */
 //高阶组件两种模式
 //1.属性代理 不改变传入组件的属性 只是在这基础之上 往传入的组件中拓展了更多的属性
 //2.反向继承 属性继承自传入的组件 而不是React
function Suit(WrapComponent) {
    //通过WrapComponent接受一个组件
    //返回一个新组件,组件的结构就是接受的WrapComponent
    //定义当前这套"制服"的特点
    return class HOC extends React.Component {
        constructor(){
            super()
            this.state = {
                color:"deeppink",
                weapon:"laser激光 动感光波",
                skill:"飞",
                nickname:"Iron Man"
            }
        }

        attack = ()=>{
            alert('🍌橡胶橡胶拳')
        }
        render() {
            return <WrapComponent attack={this.attack} {...this.state}/>
        }
    }

    //反向继承
    // return class HOC extends WrapComponent {
    //     //高阶组件可以获取传入组件的属性
    //     //高阶组件不能声明state
    //     // constructor(){
    //     //     super()
    //     //     this.state = {}
    //     // }
    //     render(){
    //         console.log(this.state);
            
    //         return <WrapComponent/>
    //     }
    // }
}

export default Suit;